import Image from "next/image";
import { useDrag } from "react-dnd";
import { DndItemTypes } from "../../consts";

export default function BaseItem({ data }) {
	// console.log(data);
	const { label, type } = data;

	const [, dragRef] = useDrag(
		() => ({
			type: DndItemTypes.COMPONENT_ITEM,
			item: { type: type }
		}),
		[type]
	);

	return (
		<div className="panel-item" ref={dragRef}>
			<div className="base-item-img">
				<Image src="/assets/images/bar_x.png" alt={`${label}`} width={32} height={32} loading="lazy" />
			</div>
			<div className="base-item-title">{label}</div>
		</div>
	);
}
